<template>
    <button 
    @click="childrenClick"
    :disabled="disabled?true:undefined"
     :class="['common',water?'water':'',disabled?'wxj_noallowed':'',type,radius?'radius':'',size]">
        <slot>
            default
        </slot>
    </button>
</template>
<script lang='ts' setup>

import {defineProps,defineEmits} from "vue"
name:"wxjButton"
const emits=defineEmits(["click"])
const props=defineProps({
    type:{
        type:String,
        default:"success"
    },
    size:{
        type:String,
        default:"normal"
    },
    radius:{
        type:Boolean,
        default:false,
    },
    disabled:{
        type:Boolean,
    },
    water:{
        type:Boolean,
    },
})

const childrenClick=()=>{
    emits("click","jjj")
}

</script>

<style lang='scss' scoped>
.common{
    outline:none;
    border: none;
    padding:10px 15px;
    margin: 5px 10px;
    cursor: pointer;
    
}

.success{
    color:#fff;
    background-color: rgb(78, 142, 206);
    &:hover{
        background-color: rgb(52, 108, 163);   
    }
}

.error{
    color:#fff;
    background-color: rgb(219, 97, 97);
    &:hover{
        background-color: rgb(207, 45, 45);   
    }
}

.warning{
    color:#fff;
    background-color: rgb(221, 213, 101);
    &:hover{
        background-color: rgb(247, 243, 8);   
    }
}

.radius{
    border-radius:10px;
}

.small{
padding:5px 10px;
}

.big{
    padding:15px 20px;
}




</style>